import React, { useState, useEffect } from 'react';
import './css/home.css';
import { Button, Swiper, Toast, Sticky, Card, CountDown } from 'react-vant';
import { AppsO, Search } from '@react-vant/icons';
export default function Home() {
  //吸顶隐藏和显示
  const [show, setshow] = useState(false);

  //存储当前是星期几
  const [currentDate, setCurrentDate] = useState(new Date());
  //获取星期
  const getDayOfWeek = () => {
    const options = { weekday: 'long' };
    return currentDate.toLocaleDateString('zh-CN', options);
  };

  // 用来监听页面滚动
  useEffect(() => {
    window.addEventListener('scroll', loging);
  }, []);
  const loging = () => {
    let htmltop = document.documentElement || document.body; //页面到顶部的距离
    if (htmltop.scrollTop >= 100) {
      //超过100px显示
      setshow(true);
    } else {
      setshow(false);
    }
  };

  return (
    <div>
      <div className="square">
        <div className="firse">
          <div className="biao">
            <h1>{getDayOfWeek()}</h1>
          </div>
          <div className="biao1">
            <AppsO fontSize={30} />
          </div>
          <div className="biao1">
            <Search fontSize={30} />
          </div>
        </div>
        {show ? (
          // <Sticky>
          <div style={{ width: '100%', position: 'fixed', top: '0px' }}>
            <Sticky>
              <div className="firse">
                <div className="biao">
                  <h1>首页</h1>
                </div>
                <div className="biao1">
                  <AppsO fontSize={30} />
                </div>
                <div className="biao1">
                  <Search fontSize={30} />
                </div>
              </div>
            </Sticky>
          </div>
        ) : (
          // {/* </Sticky> */}
          ''
        )}
      </div>
      <div style={{ height: '750px' }}></div>
    </div>
  );
}
